<template>
	<view class="flower-item" @click="toDetail(item)">
		<u--image radius="8rpx" :src="item.image && item.image.split(',')[0]" width="100%" height="110px"></u--image>
		<view style="height: 16rpx;"/>
		<view class="flower-title u-line-1">{{item.name}}</view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	export default {
		name: 'FlowerItem',
		props: {
			item: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			...mapActions(['setDetail']),
			toDetail(detail) {
				this.setDetail({detail});
				uni.navigateTo({
					url: '/pageDiamond1/flowers/detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flower-item {
		.flower-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
		}
	}
</style>